<template>
  <el-dialog title="添加月费" :visible.sync="dialogFormVisible" append-to-body>
    <el-form ref="createmonthfee"  label-width="100px">
      <el-form-item label="项目">
        <el-select
          v-model="form.itemMark"
          clearable
          filterable
          remote
          reserve-keyword
          placeholder="请输入关键词"
          :remote-method="remoteMethod"
          @change="changefee"
          :loading="itemloading">
          <el-option
            v-for="item in itemList"
            :key="item.mark"
            :label="item.name"
            :value="item.mark">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="月费用">
        <el-input type="number" v-model="form.monthFee"></el-input>
      </el-form-item>
<!--      <el-form-item label="日费用">-->
<!--        <el-input type="number" v-model="form.dailyFee"></el-input>-->
<!--      </el-form-item>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>

    import { searchAllItemInfos } from "@/api/item";
    import { addBasicMonthlyFee } from '@/api/account'
    export default {
        name: "",
        data() {
            return {
              dialogFormVisible: false,
              checkInMark: undefined,
              form: {
                itemMark: undefined,
                monthFee: undefined,
                dailyFee: 0,
              },
              itemList: [],
              itemloading: false
            }
        },
        methods: {
          show(cmark) {
            this.checkInMark = cmark
            this.dialogFormVisible = true
          },

          async save() {
              const data = await addBasicMonthlyFee(this.checkInMark, this.form);
            if(data.code == "200") {
              this.$baseMessage("添加成功");
              this.dialogFormVisible = false
            } else {
              this.$baseMessage("添加失败，"+data.message);
            }

          },
            changefee(value){
                let obj = {};
                obj = this.itemList.find((item)=>{
                    return item.mark === value;
                });
                let getName = ''
                console.log(obj.fee)
                this.form.monthFee=obj.fee
            },
          //查询项目列表
          async searchItems(query){
            let itemRes = await searchAllItemInfos(query,null)
            if(itemRes.code=='200' && itemRes.data){
              this.itemList = itemRes.data
            }else{
              this.itemList = []
            }
          },
          remoteMethod(query) {
            if (query !== '' && query.length>=2) {
               this.searchItems(query)
            } else {
              this.itemList = [];
            }
          }
        },

        mounted(){
        }
    }
</script>

<style scoped>

</style>
